<template>
    <div class="body bg-body">
        <div class="w">
            <div
                class="flex jus-between ali-cen"
                style="padding: 29px 0; border-bottom: 2px solid #5095f7"
            >
                <span class="fs-bold txt-primary" style="font-size: 22px"
                    >产品详情</span
                >
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/iot' }"
                        >产品列表</el-breadcrumb-item
                    >
                    <el-breadcrumb-item>产品详情</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div
                class="flex ali-cen bg-white mb-30"
                style="padding: 30px 66px 32px 30px"
            >
                <img
                    :src="`${imgPrefix}${mes.GOOD_LOGO}`"
                    width="160"
                    height="160"
                />
                <div class="ml-30">
                    <h3 class="fs-bold txt-tit mb-30" style="font-size: 24px">
                        {{ mes.GOOD_NAME }}
                    </h3>
                    <p class="fs-16 txt-info">
                        {{ mes.GOOD_DESC }}
                    </p>
                </div>
            </div>
            <div class="bg-white">
                <div class="energy-nav">
                    <el-menu
                        :default-active="activeIndex"
                        mode="horizontal"
                        @select="handleSelect"
                    >
                        <el-menu-item index="1">产品说明</el-menu-item>
                        <el-menu-item index="2">内容详情</el-menu-item>
                        <el-menu-item index="3">相关案例</el-menu-item>
                    </el-menu>
                </div>
                <div class="energy-content p-30">
                    <div v-show="activeIndex == '1'">
                        <div class="explain" v-html="mes.GOOD_DETAIL">
                            <!-- <h4
                                class="fs-bold txt-tit"
                                style="margin-bottom: 5px"
                            >
                                研发背景：
                            </h4>
                            <p class="txt-tit">
                                智慧能源平台（一期）集能源数据采集、控制、预测分析、优化地阿偶和考核管理等功能与一体，实现了对全厂以及重要设备、生产线的能源精细化管理。智慧能源平台（一期）集能源数据采集、控制、预测分析、优化地阿偶和考核管理等功能与一体，实现了对全厂以及重要设备、生产线的能源精细化管理。
                            </p> -->
                        </div>
                    </div>
                    <div v-show="activeIndex == '2'">
                        <div
                            class="mb-10"
                            v-for="(item, index) in info"
                            :key="'A' + index"
                        >
                            <img
                                :src="`${imgPrefix}${item.url}`"
                                width="100%"
                            />
                        </div>
                    </div>
                    <div v-show="activeIndex == '3'">
                        <p class="txt-tit mb-20">
                            点击下方方案图片／名称可查看案例详情
                        </p>
                        <div class="relevant-case flex flex-wrap">
                            <div
                                class="mr-30 mb-30 cur-p"
                                v-for="item in relevantList"
                                :key="item.uids"
                                @click="
                                    $router.push(
                                        `/case/caseDetail/${item.uids}`
                                    )
                                "
                            >
                                <img
                                    :src="`${imgPrefix}${item.imgUrl}`"
                                    width="360"
                                    height="203"
                                />
                                <p class="txt-cen txt-primary mt-10">
                                    {{ item.tip }}
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'iotDetail',
        props: {
            id: String,
        },
        data() {
            return {
                mes: {},
                info: {},
                relevantList: [],
                activeIndex: '1',
                imgPrefix: this.$store.getters.imgUrl,
            }
        },
        methods: {
            handleSelect(index) {
                this.activeIndex = index
            },
            getDetail() {
                this.$http.getGoodsInfo({ uids: this.id }).then((res) => {
                    res = res.data
                    this.mes = res.data
                    this.info = JSON.parse(res.data.IMG_URL)
                    this.relevantList = res.case
                })
            },
        },
        created() {
            this.getDetail()
        },
        activated() {
            this.getDetail()
        },
    }
</script>

<style lang="scss" scoped>
    .energy-content {
        min-height: 1138px;
        .relevant-case {
            > div:nth-child(3n) {
                margin-right: 0;
            }
        }
    }
</style>

<style lang="scss">
    .energy-nav {
        .el-menu-item {
            font-size: 16px;
            height: 50px;
            line-height: 50px;
            color: #333;
            &.is-active {
                color: #389cf0;
            }
            &:hover {
                color: #389cf0 !important;
            }
        }
    }
</style>
